<template>
  <div ref="net_sec" class="net-sec" style="width: 100%;height:30px;"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from 'vuex';

export default {
  props:{
    data:{
      type:Object,
      default(){
        return {
          name:'交付时间',
          value:20
        }
      }
    }
  },
  data() {
    return {
      chartInstance: null,
      allData: null
    };
  },
  computed: {
 ...mapState(['theme'])
  },
  methods: {
    initChart() {
      // 初始化对象
     this.chartInstance = echarts.init(this.$refs.net_sec,this.theme);

      var  category= [{
        name: this.data.name,
        value: this.data.value
      }]; // 类别
      var total = 100; // 数据总数
      var  datas = [];
      category.forEach(value => {
        datas.push(value.value);
      });
      let option = {
        xAxis: {
          max: total,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 0,
          top: 0, // 设置条形图的边距
          right: 0,
          bottom: 0
        },
        yAxis: [{
          type: "category",
          inverse: false,
          data: category,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }],
        series: [{
          // 内
          type: "bar",
          barWidth: 14,

          legendHoverLink: false,
          silent: true,
          itemStyle: {
              color: function(params) {
                let color;
                if(params.dataIndex==19){
                  color = {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: "#EB5118" // 0% 处的颜色
                    },
                      {
                        offset: 1,
                        color: "#F21F02" // 100% 处的颜色
                      }
                    ]
                  }
                }else if(params.dataIndex==18){
                  color = {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: "#FFA048" // 0% 处的颜色
                    },
                      {
                        offset: 1,
                        color: "#B25E14" // 100% 处的颜色
                      }
                    ]
                  }
                }else if(params.dataIndex==17){
                  color = {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: "#F8E972" // 0% 处的颜色
                    },
                      {
                        offset: 1,
                        color: "#E5C206" // 100% 处的颜色
                      }
                    ]
                  }
                }else{
                  color = {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: "#1588D1" // 0% 处的颜色
                    },
                      {
                        offset: 1,
                        color: "#0F4071" // 100% 处的颜色
                      }
                    ]
                  }
                }
                return color;
              },
          },
          label: {
              show: false,
              position: "left",
              formatter: "{b}",
                color: "#fff",
                fontSize: 14


          },
          data: category,
          z: 1,
          animationEasing: "elasticOut"
        },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
                color:"#061348"
            },
            symbolRepeat: "fixed",
            symbolMargin: 6,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [1, 21],
            symbolPosition: "start",
            symbolOffset: [1, -1],
            symbolBoundingData: this.total,
            data: category,
            z: 2,
            animationEasing: "elasticOut"
          },
          {
            // 外边框
            type: "pictorialBar",
            symbol: "rect",
            symbolBoundingData: total,
            itemStyle: {
                color: "none"
            },
            label: {
                formatter: (params) => {
                  var text;
                  if(params.dataIndex==1){
                    text = '{a|  100%}{f|  '+params.data+'}';
                  }else if(params.dataIndex==2){
                    text = '{b|  100%}{f|  '+params.data+'}';
                  }else if(params.dataIndex==3){
                    text = '{c|  100%}{f|  '+params.data+'}';
                  }else{
                    text = '{d|  100%}{f|  '+params.data+'}';
                  }
                  return text;
                },
                rich:{
                  a: {
                    color: 'red'
                  },
                  b: {
                    color: 'blue'
                  },
                  c:{
                    color: 'yellow'
                  },
                  d:{
                    color:"green"
                  },
                  f:{
                    color:"#ffffff"
                  }
                },
                position: 'right',
                distance: 0, // 向右偏移位置
                show: false

            },
            data: datas,
            z: 0,
            animationEasing: "elasticOut"
          },
          {
            name: "外框",
            type: "bar",
            barGap: "-120%", // 设置外框粗细
            data: [total, total, total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total],
            barWidth: 20,
            itemStyle: {
                color: "transparent", // 填充色
                borderColor: "#1C4B8E", // 边框色
                borderWidth: 1, // 边框宽度
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: "top" // insideTop 或者横向的 insideLeft
                }

            },
            z: 0
          }
        ]
      };





      this.chartInstance.setOption(option);
    },
    getData() {
      this.allData = {}
    },
    updateChart() {

    }
  },
  mounted() {
    this.initChart();
        // 添加随页面变化而变化
    window.addEventListener('resize', () => {
       this.chartInstance.resize()
    })
  },
      destroyed () {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
      watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose()
      this.initChart()

    }
  },
};
</script>

<style lang="scss" scoped>
.net-sec {
  width: 100%;
height:30px;
}
</style>
